<template>
  <view class="uni-container">
    <uni-forms
      ref="form"
      :model="formData"
      validateTrigger="bind"
      label-width="120px"
    >
      <uni-forms-item name="user_id" label="">
        <uni-easyinput
          placeholder="上传用户ID"
          v-model="formData.user_id"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="merchant_id" label="" required>
        <uni-easyinput
          placeholder="关联商户ID"
          v-model="formData.merchant_id"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="image_url" label="图片URL" required>
        <uni-easyinput
          placeholder="图片访问地址"
          v-model="formData.image_url"
          trim="both"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="description" label="图片描述">
        <uni-easyinput
          placeholder="图片描述信息"
          v-model="formData.description"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="create_time" label="创建时间">
        <uni-datetime-picker
          return-type="timestamp"
          v-model="formData.create_time"
        ></uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="delete_time" label="删除时间">
        <uni-datetime-picker
          return-type="timestamp"
          v-model="formData.delete_time"
        ></uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="is_deleted" label="是否删除">
        <switch
          @change="binddata('is_deleted', $event.detail.value)"
          :checked="formData.is_deleted"
        ></switch>
      </uni-forms-item>
      <view class="uni-button-group">
        <button
          type="primary"
          class="uni-button"
          style="width: 100px"
          @click="submit"
        >
          提交
        </button>
        <navigator open-type="navigateBack" style="margin-left: 15px">
          <button class="uni-button" style="width: 100px">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { validator } from "../../js_sdk/validator/gallery.js";

const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = "gallery";

function getValidator(fields) {
  let result = {};
  for (let key in validator) {
    if (fields.includes(key)) {
      result[key] = validator[key];
    }
  }
  return result;
}

export default {
  data() {
    let formData = {
      user_id: "",
      merchant_id: "",
      image_url: "",
      description: "",
      create_time: null,
      delete_time: null,
      is_deleted: false,
    };
    return {
      formData,
      formOptions: {},
      rules: {
        ...getValidator(Object.keys(formData)),
      },
    };
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    /**
     * 验证表单并提交
     */
    submit() {
      uni.showLoading({
        mask: true,
      });
      this.$refs.form
        .validate()
        .then((res) => {
          return this.submitForm(res);
        })
        .catch(() => {})
        .finally(() => {
          uni.hideLoading();
        });
    },

    /**
     * 提交表单
     */
    submitForm(value) {
      // 使用 clientDB 提交数据
      return db
        .collection(dbCollectionName)
        .add(value)
        .then((res) => {
          uni.showToast({
            title: "新增成功",
          });
          this.getOpenerEventChannel().emit("refreshData");
          setTimeout(() => uni.navigateBack(), 500);
        })
        .catch((err) => {
          uni.showModal({
            content: err.message || "请求服务失败",
            showCancel: false,
          });
        });
    },
  },
};
</script>
